import React, { useState, useEffect } from "react";

import style from "./index.module.scss";
import Search from "@/components/Search";
import { Table, Pagination } from "antd";
interface IProps {
  // 表搜索字段
  searchFields: Array<any>;
  // 表头
  columns: Array<any>;
  // 表数据
  data: Array<any>;
  // 默认总数
  defaultTotal: number;
  // 自定义渲染表内容
  customRender?: (data: any) => React.ReactNode;
  // 搜索方法
  onSearch: (arg: any) => Promise<any>;
}

export const SPTDataTable: React.FC<IProps> = ({
  searchFields = [],
  columns = [],
  data = [],
  defaultTotal,
  customRender = null,
  onSearch
}) => {
  // loading
  const [loading, setLoading] = useState(false);
  // 当前页
  const [page, setPage] = useState(1);
  // 每页数量
  const [pageSize, setPageSize] = useState(12);
  // 总数
  const [total, setTotal] = useState(defaultTotal);
  // 搜索参数
  const [searchParams, setSearchParams] = useState({});
  // 初始化执行
  useEffect(() => {
    // 初始化的参数，只有 page 和 pageSize，得到的结果是全部
    setLoading(true);
    const params = { page, pageSize, ...searchParams };
    onSearch(params).then(res => {
      setTotal(res[1]);
      setLoading(false);
    });
    // 依赖为 page， pageSize, searchParams, 当依赖改变时，重新onSearch方法拿到数据在父级
  }, [page, pageSize, searchParams]);

  return (
    <div className={style.wrapper}>
      <Search
        fields={searchFields}
        onSearch={setSearchParams} /* 参数改变时,设置搜索参数 */
      />
      {/** 如果设置了自定义渲染，则会进行自定义渲染 */}
      {customRender ? (
        customRender(data)
      ) : (
        <Table
          dataSource={data}
          loading={loading}
          columns={columns}
          rowKey={"id"}
          pagination={false}
        />
      )}
      <Pagination
        style={{margin: '15px 0'}}
        pageSize={pageSize}
        current={page}
        total={total}
        onChange={(page, pageSize) => {
          setPage(page);
          setPageSize(pageSize);
        }}
      />
    </div>
  );
};
